<template>
  <!-- element-plus中的容器 -->
  <el-container>
    <!-- 左侧菜单 -->
    <el-aside width="10%" style="height: 98vh;background-color: #545c64; border-radius: 4px;">
      <div class="logo" style="display: flex;justify-content: center;">
<!--        <el-image src="/src/assets/images/img_4.png" fit="contain"></el-image>-->
        <h3 style="color: yellow">博客管理系统</h3>
      </div>
      <!-- element-plus的菜单标签 -->
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          :router="isRouter"
          @open="handleOpen"
          @close="handleClose"
      >
        <el-menu-item index="/about">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/user">
          <el-icon><UserFilled /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/article">
          <el-icon><Management /></el-icon>
          <span>文章管理</span>
        </el-menu-item>
        <el-menu-item index="/comment">
          <el-icon><Comment /></el-icon>
          <span>评论管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <div>管理员：<strong>{{userinfo.username}}</strong></div>
          <!-- 下拉菜单 -->
          <!-- command: 条目被点击后会触发,在事件函数上可以声明一个参数,接收条目对应的指令 -->
          <el-dropdown placement="bottom-end" @command="handleCommand">
            <span class="" style="align-items: center;display: flex;">
                <el-avatar size="large" :src="userinfo.avatarurl" />
                <el-icon>
                    <CaretBottom />
                </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="back" :icon="Switch">返回前台</el-dropdown-item>
<!--                <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>-->
<!--                <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>-->
                <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>

      </el-header>
      <!-- 中间区域 -->
      <el-main>

        <router-view></router-view>

      </el-main>
      <!-- 底部区域 -->
      <el-footer>
        <span style="display: flex;justify-content: center;align-items: center;">
          Blog ©2024 Created by xhc
        </span>
      </el-footer>

    </el-container>
  </el-container>
</template>

<script setup>
import {
  Management,
  Promotion,
  UserFilled,
  Menu as IconMenu,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom,
  Switch
} from '@element-plus/icons-vue'
import {computed, ref} from "vue"
import useUserInfoStore from "../../stores/userInfo.js"
import {useTokenStore} from "../../stores/token.js"
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";



const router = useRouter()

const isRouter = ref(true)

const activeIndex = computed(() => {
  return router.currentRoute.value.path === '/' ? '/index' : router.currentRoute.value.path;
})
const handleSelect = (key, keyPath) => {
  activeIndex.value = keyPath[0]
}

const tokenStore = useTokenStore()
const userInfoStore = useUserInfoStore()

const userinfo = ref({...userInfoStore.info})

const handleCommand = (command)=>{
  //判断指令
  if(command === 'logout'){
    //退出登录
    ElMessageBox.confirm(
        '您确认要退出吗?',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(async () => {
          //退出登录
          //1.清空pinia中存储的token以及个人信息
          tokenStore.removeToken()
          userInfoStore.removeInfo()

          //2.跳转到登录页面
          router.push('/login')

          ElMessage({
            type: 'success',
            message: '退出登录成功',
          })

        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '用户取消了退出登录',
          })
        })
  }else{
    //路由
    router.push('/main')
  }
}



</script>

<style scoped>
/*.logo{*/
/*  background-image: url("src/assets/images/img_4.png");*/
/*}*/

</style>